<template>
  <view class="mine">
    <view class="cell-avatar" @click="changeAvatar">
      <cmd-cell-item title="头像" slot-right arrow>
        <cmd-avatar icon='user' :size="50" shape='circle' :src='userData.avatarUrl'></cmd-avatar>
      </cmd-cell-item>
    </view>
    <view class="cell-links">
      <block v-for="(item,index) in listItem"  :key="index">
        <cmd-cell-item :title="item.title" :slot-right="item.position" :arrow="item.arrow" :addon="item.isAddon" @click="dispatchFunc(item)"></cmd-cell-item>
      </block>
    </view>
    <view class="btn-row">
      <button @click="logoutUser" type="primary" class="primary loginBtn">退出登录</button>
    </view>
  </view>
</template>

<script>
    import cmdCellItem from '@/components/cmd-cell-item/cmd-cell-item.vue'
    import cmdAvatar from "@/components/cmd-avatar/cmd-avatar.vue"
    import mixins from '@/mixins/index';
	import {Decrypt} from '@/utils/secret.js'

    import MineService from '@/services/mine/index';
    const mineService = new MineService();

    export default {
        mixins:[mixins],
        name: "index",
        components: {cmdCellItem,cmdAvatar},
        data(){
            return{
              listItem:[]
            }
        },
        computed:{
          listItem_(){
            return [
                    {
                        title:'账号',
                        isAddon:Decrypt(this.userData.username),
                        info: false,
                        arrow:false,
                        position: false,
                    },
                    {
                        title:'基本信息',
                        isAddon:'',
                        info: false,
                        arrow:true,
                        position: false,
                        code:'baseinfo',
                        route: '/pages/tabbar/mine/personalList/baseinfo'
                    },
                ];
          }
        },
        methods:{
            logoutUser(){
                this.logout();
            },
            dispatchFunc({code,route}){
              console.log('code:',code);
                if(route!=undefined){
                    uni.navigateTo({
                        url: `${route}?code=${code}`
                    });
                    return;
                }
                switch(code){
                    case 'logout':
                        this.logout();
                        break;
                }
            },
            changeAvatar(){
                uni.navigateTo({
                  url:'/pages/tabbar/mine/userAvatar/previewAvatar'
                })
                // uni.navigateTo({
                //   url:'/pages/nobuild/nobuild'
                // })

                // var that = this;
                // uni.chooseImage({
                //     count: 1, //默认9
                //     sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                //     sourceType: ['album'], //从相册选择
                //     success: function (res) {
                //         console.log(res.tempFilePaths)
                //         that.avatarImg = res.tempFilePaths[0];
                //         console.log(that.avatarImg)
                //     }
                // });
            }
        },
        onLoad(){
          const $this = this;
          mineService.getUserInfoItem({roleType:this.userData.roleType}).then(
            resultDto=>{
              const {success,result} = resultDto;
              if(success){
                result.forEach(element => {
                  element.info =false;
                  element.arrow =true;
                  element.position =false;
                });
                  $this.listItem =  [...$this.listItem_,...result];
              }
            }
          )
        }
    }
</script>

<style scoped lang="less">
  .btn-row {
    margin-top: 50upx;
    padding: 20upx 50upx;
  }
  .box-shadow{
    box-shadow: 0upx 4upx 20upx 0upx
    rgba(153, 153, 153, 0.2);
    border-radius: 8upx;
    border: solid 1px #f7f7f7;
  }
  .cell-avatar {
    width: 710upx;
    margin: 40upx auto 0;
    .box-shadow;
  }
  .cell-links {
    width: 710upx;
    margin: 40upx auto 0;
    box-shadow: 0upx 4upx 20upx 0upx
    rgba(153, 153, 153, 0.2);
    border-radius: 8upx;
    border: solid 1px #f7f7f7;
  }
  .cmd-cell-item-body::before {
    content: none;
    height: 0;
  }
</style>